
@font-face {
  font-family: TCloudNumber;
  src: url("../pages/design/assets/TCloudNumber-Regular.ttf");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.font(@i) when(@i <= 64){
  .font-@{i} {
    font-size: @i + 0px;
    line-height: @i + 8px;
    margin: 16px 0;
  }
  .font((@i + 2));
}

.doc-fonts {
  p + p {
    margin-top: 8px;
  }

  .font(10);

  .divider {
    margin: 16px 0;
    border-top: 1px solid var(--component-stroke);
  }

  .fonts-block {
    padding: 20px 24px;
    margin: 16px 0;
    border-radius: 6px;
    background-color: var(--bg-color-demo);
    position: relative;
    border: 1px solid var(--component-border);

    &.tcloud {
      font {
        font-family: TCloudNumber;
        font-weight: normal;
        font-size: 36px;
        line-height: 48px;
      }
  
      .tag {
        font-family: TCloudNumber;
        position: absolute;
        right: 16px;
        bottom: 12px;
  
        svg {
          width: 14px;
          margin: 0 12px;
          vertical-align: middle;
          color: var(--text-secondary);
        }
        span {
          line-height: 22px;
          color: var(--text-secondary);
        }
      }
    }

    &.font-steps {
      color: var(--text-primary);
      .title {
        font-size: 14px;
        line-height: 22px;
        color: var(--text-placeholder);
      }

      .step {
        width: 145px;
        display: inline-block;
      }
      .desc {
        float: right;
      }
    }

    &.font-size {
      input[type=range] {
        -webkit-appearance: none;
        width: 154px;
        background: transparent;
        margin-left: 16px;
      }
      
      input[type=range]::-webkit-slider-thumb {
        -webkit-appearance: none;
        border: 1px solid #0052D9;
        height: 14px;
        width: 14px;
        border-radius: 100%;
        background: #ffffff;
        cursor: pointer;
        margin-top: -5px;
      }

      input[type=range]::-webkit-slider-runnable-track {
        width: 100%;
        height: 4px;
        cursor: pointer;
        border-radius: 2px;
        background: #0052D9;
      }
      
      input[type=range]:focus {
        outline: none;
      }      
      .ctrl {
        display: flex;
      }
      .line-height {
        font-size: 20px;
        line-height: 28px;
        color: var(--text-primary);
      }
    }

    &.font-weight {
      font-size: 36px;
      line-height: 44px;
      display: flex;
      flex-direction: column;

      .weight-600 {
        font-weight: 600;
        margin-bottom: 16px;
      }
    }

  }

  .fonts-block-wrapper {
    display: flex;

    .fonts-block + .fonts-block {
      margin-left: 24px;
    }

    .fonts-block {
      padding: 16px;
      flex: 1;
      background: #fff;

      &.black {
        background: #000;
      }

      .color-list {
        border-radius: 3px;

        .item {
          font-size: 12px;
          line-height: 22px;
          padding: 30px 8px 4px;
          display: flex;
          justify-content: space-between;
          transition: all .2s var(--anim-time-fn-easing);
          cursor: pointer;

          &:hover {
            transform: scale(1.04);
            border-radius: 3px !important;
          }

          &:first-of-type {
            border-radius: 3px 3px 0 0;
          }

          &:last-of-type {
            border-radius: 0 0 3px 3px;
          }
        }
      }
    }
  }
}